<script lang="ts" setup>
import { Delete, Plus } from '@icon-park/vue-next'
import {} from 'vue'
import { columns } from './columns'
import EditDialog from './components/Edit.vue'
import { deleteUserApi, getUserListApi } from '/@/api/auth/account'
import { QsPageWrapper } from '/@/components/QsPageWrapper'
import { QsTable } from '/@/components/QsTable'
import { deleteItem } from '/@/hooks/useDelete'

const editDialogRef = ref<InstanceType<typeof EditDialog>>()
const multipleSelection = ref<(string | number)[]>([])
const handleSelectionChange = (val: defs.common.User[]) => {
  multipleSelection.value = val.map((item) => item.id)
}
const dataSources = ref<defs.common.User[]>([])
const total = ref<number>(0)
const getUserList = async () => {
  const { result } = await getUserListApi()
  dataSources.value = result.rows
  total.value = result.count
}

onBeforeMount(() => {
  getUserList()
})
</script>

<template>
  <qs-page-wrapper :header="false" :query="true">
    <template #queryLeft>
      <el-button type="primary" @click="editDialogRef?.open({})">
        <template #icon>
          <plus />
        </template>
        添加
      </el-button>
      <el-button
        :disabled="!multipleSelection.length"
        type="danger"
        @click="() => deleteItem(deleteUserApi, multipleSelection).then(getUserList)"
      >
        <template #icon>
          <delete />
        </template>
        批量删除
      </el-button>
    </template>
    <qs-table
      :columns="columns"
      :data="dataSources"
      row-key="id"
      :selection="true"
      @delete="(id) => deleteItem(deleteUserApi, id).then(getUserList)"
      @selection-change="handleSelectionChange"
      @show-edit="editDialogRef?.open"
    />
    <edit-dialog ref="editDialogRef" @refresh="getUserList" />
  </qs-page-wrapper>
</template>

<style lang="scss" scoped></style>
